<template>
    <div class="com-cnt">
        <div class="goodslist">
            <div class="goods" v-for="(goods,goodsindex) in goodslist">
                <div class="goodstit">{{goods.skuName}}</div>
                <div class="goodsimg"><img :src="goods.skuThumbnail" alt="商品"></div>
                <div>
                    <p class="jfprice">会员价： {{goods.price}} 元</p>
                </div>
                <p class="changenum"> 数量：<span class="goodsnumcon">{{goods.quantity}}</span></p>
            </div>
        </div> 
        
        <div class="buynow" v-show="goodslist.length>0">
            <div class="buyinfo">
                <span class="jftotalprice">会员价： {{alldata.effectivePrice}}</span>
            </div>
            <button class="buybtn" @click="buynow">
                立即购买
            </button>
        </div>
        <div v-show="goodslist.length<=0" style="width:100%;height:100%">
            <img src="@/assets/imgs/gwcnull.png" alt="" style="width:100%;height:100%">
        </div>
    </div> 
</template>

<script>
    import { domain,domain2 } from '@/assets/js/config'
    //import { Checklist } from 'mint-ui'
    // import { Cell } from 'mint-ui'
    import $ from 'jquery'
    import Qs from 'qs'
    import axios from 'axios'
    import { maskTips } from '@/assets/js/dom'
    export default {
        name: 'shopcarPage',
        components:{
            
        },
        data(){
            return{
                goodslist: [],
                value: [],
                allvalue: [],
                allcheckvalue: [],
                totalPrice: 0,
                totalPointPrice: 0,
                checked: {},
                alldata: {},
                mobile: localStorage.getItem('phone')
            }
        },
        mounted(){
            var that = this
            var userToken = localStorage.getItem("token") || '' //用户token值
            axios({
                url: domain2 + '/shop/api/cart/getShoppingCar',
                method: 'post',
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                data: Qs.stringify({mobile:that.mobile})
            }).then(res => { that.listsucc(res)}).catch(err => { that.listerr(err) })
        },
        methods : {
            listerr: function(err){
                console.log(err)
            },
            listsucc: function(res){
                this.goodslist = res.data.data.cartItems
                this.alldata = res.data.data
                if(this.goodslist == undefined){
                    this.goodslist = []
                }
            },
            //立即购买
            buynow: function(){ 
                this.$router.push({
                    path:'/orderDetail',
                    query:{
                    }
                })
            },
            
        }
    }
</script>

<style lang="stylus" scoped>
.com-cnt
    width 100%
    height 85%
    overflow-y scroll
    .goods
        overflow hidden
        border-bottom 1px solid #d0d0d0
        padding-bottom 10px
        .changenum
            .goodsnumcon
                width 60px
            span 
                    border 1px solid #dddddd
                    width 20px
                    height 20px
                    line-height 20px
                    display inline-block
                    text-align center
                    margin-left 9px
        p
            font-size 14px
            width 50%
            float right
        .goodstit
            font-size 14px
            height 30px
            line-height 30px
            text-indent 12px
        .goodsimg
            width 80px
            height 80px
            float left
            margin-left 20px
            img 
                width 100%
                height 100%
        .ptprice
            color #ff463c
        .jfprice
            color #E67E22
    .buynow
        position fixed
        bottom 49px
        height 49px
        font-size 14px
        line-height 50px
        width 100%
        border-top 1px solid #dcdcdc
        .buyinfo
            height 49px
            float left
            width 60%
            padding-left 20px
            background #fff
            span 
                // display block
                height 25px
                line-height 25px
                font-size 18px
            .pttotalprice
                color #ff463c
            .jftotalprice
                color #e67e22
        .buybtn
            height 100%
            float right
            width 40%
            border none 
            background #aad114
            color #fff
    .goods >>> .mint-checkbox-label
        font-size 16px!important
    .footsupport
        padding-bottom 80px
    .deletechecked
        color #aad114
        font-size 14px
        padding-top 20px

</style>